<template>
<view>
<!--<import src="../../../lib/area/area.wxml"></import>-->
<uni-nav-bar title="编辑收货地址" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
<view class="add-address">
    <view class="add-form">
        <view class="form-item">
            <view class="input_title">收货人</view>
            <input class="input" @input="bindinputName" placeholder="请输入收货人姓名" :value="address.name" auto-focus></input>
        </view>
        <view class="form-item">
            <view class="input_title">手机号码</view>
            <input class="input" @input="bindinputMobile" :value="address.phoneNumber" placeholder="请输入收货人手机号码"></input>
        </view>
        <view class="form-item">
            <view class="input_title">所在地区</view>
            <input class="input" :value="address.province+address.city+address.region" disabled="true" @tap="translate" placeholder="请选择"></input>
            <image class="address_img" src="/static/static/images/address_right.png"></image>
        </view>
        <view class="form-item address_more">
            <view class="input_title">详细地址</view>
            <input class="input" @input="bindinputAddress" :value="address.detailAddress" placeholder="请输入街道门牌信息"></input>
        </view>
        <view class="form-default">
            <text class="defalt-text">设置为默认地址</text>
            <view @tap.stop="bindIsDefault">
                <image v-if="address.defaultStatus == 0" class="default-img" src="/static/static/images/check.png"></image>
                <image v-if="address.defaultStatus == 1" class="default-img" src="/static/static/images/checked.png"></image>
            </view>
            <!-- <image catchtap="bindIsDefault" wx:if="{{address.defaultStatus == 0}}" class="default-img" src="/static/images/check.png"></image>
            <image catchtap="bindIsDefault" wx:if="{{address.defaultStatus == 1}}" class="default-img" src="/static/images/checked.png"></image> -->
        </view>
        <view class="btns">
            <button class="save" @tap="saveAddress">保存</button>
        </view>
    </view>
  
</view>

<block data-type="template" data-is="areaData" data-attr="...item">
  <view class="animation-element-wrapper" :animation="animation" :style="'visibility:' + (show ? 'visible':'hidden')" @tap="hiddenFloatView" data-id="444">
     <view class="animation-element" @tap.stop="nono">
        <text class="left-bt" @tap.stop="hiddenFloatView" data-id="555">取消</text>
        <text class="right-bt" @tap.stop="hiddenFloatView" data-id="666">确定</text>
          <view class="line"></view> 

        <picker-view indicator-style="height: 50rpx;" :value="value" @change="bindChange" @tap.stop="nono">
        <!--省-->
        <picker-view-column>
           <view v-for="(sheng, index) in provinces" :key="index">
             {{sheng.name}}
          </view>
        </picker-view-column>
        <!--地级市-->
        <picker-view-column>
          <view v-for="(shi, index) in citys" :key="index">
            {{shi.name}}
          </view>
        </picker-view-column>
        <!--区县-->
        <picker-view-column>
          <view v-for="(xian, index) in countys" :key="index">
            {{xian.name}}
          </view>
        </picker-view-column>
        </picker-view>
    </view>
  </view>
</block>
</view>
</template>

<script>
// var util = require("../../../utils/util.js");
// var api = require("../../../config/api.js");
// var area = require("../../../lib/area/area.js");
import util from '../../../utils/util.js';
import api from '../../../config/api.js';

var app = getApp();
var item = {};

export default {
  data() {
    return {
      address: {
        id: 0,
        province_id: 0,
        province: '',
        city_id: 0,
        city: '',
        region_id: 0,
        region: '',
        detailAddress: '',
        full_region: '',
        name: '',
        phoneNumber: '',
        defaultStatus: 0
      },
      addressId: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options);

    if (options.id) {
      this.setData({
        addressId: options.id
      });
      this.getAddressDetail();
    } // this.getRegionList(1);

  },
  onReady: function (e) {
    var that = this;
    area.updateAreaData(that, 0, e);
  },
  methods: {
    bindinputMobile(event) {
      let address = this.address;
      address.phoneNumber = event.detail.value;
      this.setData({
        address: address
      });
    },

    bindinputName(event) {
      let address = this.address;
      address.name = event.detail.value;
      this.setData({
        address: address
      });
    },

    bindinputAddress(event) {
      let address = this.address;
      address.detailAddress = event.detail.value;
      this.setData({
        address: address
      });
    },

    bindIsDefault(e) {
      let address = this.address;
      address.defaultStatus = !address.defaultStatus ? 1 : 0;
      this.setData({
        address: address
      });
    },

    getAddressDetail() {
      let that = this;
      util.request(api.AddressDetail, {
        id: that.addressId
      }).then(function (res) {
        if (res.errno == 0) {
          that.setData({
            address: res.data
          });
        }
      });
    },

    //点击选择城市按钮显示picker-view
    translate: function (e) {
      area.animationEvents(this, 0, true, 400);
    },
    //隐藏picker-view
    hiddenFloatView: function (e) {
      console.log("id = " + e.target.dataset.id);
      area.animationEvents(this, 200, false, 400); //点击确定按钮更新数据(id=444是背后透明蒙版 id=555是取消按钮)

      if (e.target.dataset.id == 666) {
        this.updateShowData();
      }
    },
    //滑动事件
    bindChange: function (e) {
      area.updateAreaData(this, 1, e); //如果想滑动的时候不实时更新，只点确定的时候更新，注释掉下面这行代码即可。
      // this.updateShowData()
    },
    //更新顶部展示的数据
    updateShowData: function (e) {
      item = this.item; // console.log("==area=="+JSON.stringify(item))

      let address = this.address; // let selectRegionList = this.data.selectRegionList;

      address.province_id = item.provinces[item.value[0]].code;
      address.city_id = item.citys[item.value[1]].code;
      address.region_id = item.countys[item.value[2]].code;
      address.province = item.provinces[item.value[0]].name;
      address.city = item.citys[item.value[1]].name;
      address.region = item.countys[item.value[2]].name;
      address.full_region = item.provinces[item.value[0]].name + ' ' + item.citys[item.value[1]].name + ' ' + item.countys[item.value[2]].name;
      this.setData({
        address: address
      });
    },

    cancelAddress() {
      uni.reLaunch({
        url: '/pages/ucenter/address/address'
      });
    },

    saveAddress() {
      console.log(this.address);
      let address = this.address;

      if (address.name == '') {
        util.showErrorToast('请输入姓名');
        return false;
      }

      if (address.phoneNumber == '') {
        util.showErrorToast('请输入手机号码');
        return false;
      }

      if (address.region_id == 0) {
        util.showErrorToast('请输入省市区');
        return false;
      }

      if (address.address == '') {
        util.showErrorToast('请输入详细地址');
        return false;
      }

      let that = this;
      util.request(api.AddressSave, {
        id: address.id,
        name: address.name,
        phoneNumber: address.phoneNumber,
        province: address.province,
        city: address.city,
        region: address.region,
        detailAddress: address.detailAddress,
        defaultStatus: address.defaultStatus
      }, 'POST').then(function (res) {
        if (res.errno == 0) {
          // wx.reLaunch({
          //   url: '/pages/shopping/address/address',
          // })
          uni.navigateBack({
            delta: 0
          });
        }
      });
      console.log(address.defaultStatus);
      console.log(address.id);
    }

  }
};
</script>
<style>


page{
    position: relative;
    height: 100%;
    background: #fff;
}
.add-address{
    background: #f1f1f1;
    height: 100%;
}
.add-address .add-form{
    /* position: absolute; */
    margin-top: 20rpx;
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.add-address .form-item{
    height: 100rpx;
    padding-left: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    padding-right: 30rpx;
    font-size: 28rpx;
}
.add-address .input_title{
    width: 142rpx;
}
.add-address .address_img{
    height: 28rpx;
    width: 28rpx;
}
.add-address .input{
    flex: 1;
    overflow: hidden;
}
.add-address .address_more{
    height: 140rpx;
    padding-top: 36rpx; 
    padding-bottom: 76rpx;
}
.add-address .form-default{
    display: flex;
    justify-content: space-between;
    height: 120rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;
    border-top: 20rpx solid #f1f1f1;
}
.default-img{
    margin-top: 35rpx;
    width: 30rpx;
    height: 30rpx;
}
.default-input{
    width: 28rpx;
    height: 100rpx;
    padding-left: 0rpx;
    line-height: 100rpx;
    background-size: 28rpx 28rpx;
    font-size: 28rpx;
}

.default-input.selected{
    background-size: 28rpx 28rpx;
}

.add-address .btns{
    background-color: #f1f1f1;
    bottom: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 60%;
}

.add-address .save{
    margin-top: 80rpx;
    height: 80rpx;
    width: 640rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    border:none;
    border-radius: 40rpx;
}


.add-address .save{
    background: #b28850;
}

@import "../../../lib/area/area.css";
</style>